<template>
    <div>
        <el-card class="crumbs-card">
            <div class="crumbs">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item :to="{ path: '/main/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item :to="{ path: '/main/first' }">用户信息</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
        </el-card>
        <el-card class="container">
            <!--用户信息 start-->
            <el-container>
                <!--<el-header></el-header>-->
                <el-container>
                    <!--侧边栏头像显示上传-->
                    <!--<el-aside width="300px">-->
                        <!--<el-upload-->
                                <!--class="avatar-uploader"-->
                                  <!--action="https://www.mocky.io/v2/5185415ba171ea3a00704eed/posts/"-->
                                <!--:show-file-list="false"-->
                                <!--:on-success="handleAvatarSuccess"-->
                                <!--:before-upload="beforeAvatarUpload">-->
                            <!--&lt;!&ndash;显示头像&ndash;&gt;-->
                            <!--&lt;!&ndash;<div class="demo-type" style="height: 250px">&ndash;&gt;-->
                                <!--&lt;!&ndash;<el-avatar :size="160" src="https://empty" @error="errorHandler">&ndash;&gt;-->
                                    <!--&lt;!&ndash;<img :src="circleUrl.cURL" type="">&ndash;&gt;-->
                                <!--&lt;!&ndash;</el-avatar>&ndash;&gt;-->
                                <!--&lt;!&ndash;<br>&ndash;&gt;-->
                                <!--&lt;!&ndash;<el-button type="primary">上传头像<i class="el-icon-upload el-icon&#45;&#45;right"></i></el-button>&ndash;&gt;-->
                            <!--&lt;!&ndash;</div>&ndash;&gt;-->

                            <!--&lt;!&ndash;<img v-if="imageUrl" :src="imageUrl" class="avatar">&ndash;&gt;-->
                            <!--<i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
                            <!--<br>-->
                            <!--<el-button type="primary">上传头像<i class="el-icon-upload el-icon&#45;&#45;right"></i></el-button>-->
                        <!--</el-upload>-->
                    <!--</el-aside>-->
                    <!--侧边栏头像上传-->

                    <el-container>
                        <el-main>
                            <li><b>用户名： </b>{{namethis}}</li>
                            <li><b>手机号： </b>{{numthis }}</li>
                            <li><b>身份证号： </b>{{idNumthis}}</li>
                            <!--<li><b>其他： </b>{{otherx}}</li>-->
                        </el-main>
                    </el-container>
                </el-container>
            </el-container>
            <!--用户信息 end-->

            <!--修改信息 strat-->
            <el-dialog
                    title="用户编辑"
                    :visible.sync="dialogVisible"
                    width="30%">
                <el-form ref="form" label-width="80px">
                    <el-form-item label="用户名">
                        <el-input v-model="name"></el-input>
                    </el-form-item>
                    <el-form-item label="密码">
                        <el-input v-model="pwd"></el-input>
                    </el-form-item>
                    <el-form-item label="身份证号">
                        <el-input v-model="idNum"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号">
                        <el-input v-model="phoneNum"></el-input>
                    </el-form-item>

                </el-form>
                <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="save()">确 定</el-button>
  </span>
            </el-dialog>
            <center>
              <el-button
                     size="mini"
                     @click="handleEdit" >编辑个人信息
              </el-button>
            </center>
            <!--修改信息 end-->
        </el-card>
    </div>
</template>

<script>
import {updateUser, _getUserInfo} from '@api/user'
// import cURL from '../../../../assets/t1.jpeg'

export default {
  name: 'UserDetail',
  data: function () {
    return {
      dialogVisible: false,
      id: '',
      name: '',
      pwd: '',
      userType: '',
      idNum: '',
      phoneNum: '',

      // 图片路径
      // 上传路径
      imageUrl: '',
      // 显示路径
      // circleUrl: {cURL},
      sizeList: ['large', 'medium', 'small'],
      // 显示接口
      idthis: '',
      pwdthis: '',
      namethis: '',
      numthis: '',
      idNumthis: '',
      hotel_id: ''
    }
  },
  methods: {
    save () {
      let user = {
        id: this.id,
        username: this.name,
        password: this.pwd,
        idNum: this.idNum,
        phoneNum: this.phoneNum
        // userType: this.userType
      }
      console.log(user)
      updateUser(user).then(res => {
        if (res.status) {
          this.$message({
            message: '修改成功',
            type: 'success'
          })
          this.dialogVisible = false
        }
      })
      _getUserInfo().then(res => {
        console.log(res.data)
        this.idthis = res.data.id
        this.pwdthis = res.data.password
        this.namethis = res.data.username
        this.numthis = res.data.phoneNum
        this.idNumthis = res.data.idNum
      })
    },
    handleEdit () {
      this.id = this.idthis
      this.pwd = this.pwdthis
      this.name = this.namethis
      this.idNum = this.idNumthis
      this.phoneNum = this.numthis
      this.dialogVisible = true
    },
    // 图片上传
    handleAvatarSuccess (res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 5

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 5MB!')
      }
      return isJPG && isLt2M
    }

  },
  created () {
    _getUserInfo().then(res => {
      console.log(res.data)
      this.idthis = res.data.id
      this.pwdthis = res.data.password
      this.namethis = res.data.username
      this.numthis = res.data.phoneNum
      this.idNumthis = res.data.idNum
    })
  }
}
</script>

<style scoped>
    .el-header, .el-footer {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
    }

    .el-aside {
        background-color: #f9fafc;
        color: #333;
        text-align: center;
        line-height: 200px;
    }

    .el-main {
        background-color: #FFFFFF;
        color: #333;
        text-align: left;
        line-height: 100px;
    }

    body > .el-container {
        margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }

</style>
